<template>
	<div class="friend site-content animate" id="friend">
		<div class="content">
			<section-title>
				<div class="friend-header">
					<div class="title">友链</div>
					<div class="apply">
						<a @click="dialogFormVisible = true">+ 申请</a>
					</div>
				</div>
			</section-title>
			<!---说明-->
			<div class="statement">
				<p>首先将需要接入本博客站点，然后给我提供您站点的如下信息：</p>
				<quote>
					<p>站点名称：东哲博客</p>
					<p>站点链接：https://www.wayblogs.com</p>
					<p>简短描述：就是玩儿</p>
					<p>站点图标：https://wdz-dev-1258450135.cos.ap-guangzhou.myqcloud.com/img/8d9dbe08650fb749ade184d418fe7c83.jpg</p>
				</quote>
				<p>接入成功后将会以邮件的方式通知。</p>
			</div>
		</div>
		<div class="friend-list">
			<!-- <div class="friend-item" v-for="item in list" :key="item.id" v-show="item.status == 1"><a
					target="_blank" :href="item.href">
					<div class="site-name">{{item.name}}</div>
					<div class="site-detail">{{item.describe}}</div>
				</a></div> -->
			<el-row>
				<el-col :span="8" v-for="item in list" :key="item.id" v-show="item.status == 1">
					<a :href="item.href" target="_blank">
					<el-card :body-style="{ padding: '0px' }" shadow="never">
						<wImage :image="item.image"></wImage>
						<div class="desc">
							<span>{{item.name}}</span>
							<div class="bottom clearfix">
								{{item.describe}}
							</div>
						</div>
					</el-card>
					</a>
				</el-col>
			</el-row>
		</div>
		<el-dialog title="填写站点信息" :visible.sync="dialogFormVisible">
			<el-form :model="friendChain">
				<el-form-item label="站点名称">
					<el-input v-model="friendChain.name" placeholder="请输入站点名称" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="站点链接">
					<el-input v-model="friendChain.href" placeholder="请输入站点链接" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="站点描述">
					<el-input v-model="friendChain.describe" placeholder="请输入站点描述" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="站点图标">
					<el-input v-model="friendChain.image" placeholder="请输入站点图标链接" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addFriendChain">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import friend from '@/assets/js/friend.js'
	export default {
	  name: 'friend',
	  mixins: [
	    friend
	  ],
	  mounted () {
	  },
	  beforeDestroy () {
	  }
	}
</script>
<style lang="less" src="@/assets/css/friend.less">
</style>
<style scoped lang="less" src="@/assets/css/friend_sco.less">
</style>